<template>
<div class="login">
  <!-- 头部 -->
  <van-nav-bar
    title="登录"
    left-text=""
    left-arrow
    @click-left="onClickLeft"
  />
  <!-- form表单 -->
  <van-form @submit="onSubmit">
    <van-field
      v-model="state.user_phone"
      name="user_phone"
      label=""
      placeholder="请填写电话号码"
      :rules="[{ required: true, message: '请填写用户名' }]"
    />
    <van-field
      v-model="state.password"
      type="password"
      name="password"
      label=""
      placeholder="请填写密码"
      class="passwordimg"
      :rules="[{ required: true, message: '请填写密码' }]"
    /> 
    <div style="margin: 16px;position: relative;">
      <van-button round block type="primary" native-type="submit">提交</van-button>
    </div>
  </van-form>
 
</div>
<!-- 跳转到登录页 -->
<router-link to="/" style="font-size: 15px; 
  color: #999; margin-left: 15px;">忘记密码</router-link>
  <router-link to="/registered" style="font-size: 15px; 
  color: #999; margin-left: 220px;">立即注册</router-link>
  <div class="vue-pass">
    <router-link to="/" style="font-size: 15px; 
  color: #999; margin-left: 160px;">第三方账号登录</router-link>
  <div><img src="../../assets/img/微信@2x(1).png"  style=" height: 60px; width: 80px; margin-left: 170px;margin-top: 10px;"></div>
    </div>
    <div class="">
    <router-link to="/" style="font-size: 15px; 
  color: #999; margin-left: 180px;">微信登录</router-link></div>
  <div class="vue-bottom">
    <router-link to="/" style="font-size: 15px; 
  color: #999; margin-left: 80px;">登录注册表示您同意<span style=" color: blue;">《助农汇服务协议》</span></router-link></div>
</template>
<script>
//表单验证需要的组件
import { ref } from 'vue';
import router from "../../router/index.js";
export default {
  setup() {
    //头部点击左侧按钮
    const onClickLeft = () => {
      console.log(123);
    };
    //表单验证的
    const state = ref({
      user_phone: '',
      password: '',
    });
    const onSubmit = (values) => {
      fetch("http://www.pudge.wang:5000/api/users/login",{
      　　method: 'POST',　　//用于传递实际参数　　
          body :JSON.stringify(values),　//进行配置 必须设置
          headers:{'Content-Type' : 'application/json;charset=utf-8'}
      })
      .then(response=>response.json())
      .then(res => {
      　　if(res.status===0){
          router.push('/home');
          localStorage.setItem("token",res.token)
        }else if(res.status===2){
          alert("密码错误，请重新输入");
          state.value.password="";
        }else{
          alert("该号码未注册");
          state.value.password="";
          state.value.user_phone="";
        }
      });
    };
    return {
      onClickLeft, onSubmit,state
    };
  },
};
</script>

<style>
.login .van-field__body{
  border-bottom: 1px solid #ccc;padding: 0px;
  position: relative;
}
 
.login  .van-cell{
 overflow: visible;
 margin-top: 10px;
  background: url(../../assets/img/手机@2x.png) no-repeat 18px center;
  background-size: 10px;
}
.login .passwordimg{
  background: url(../../assets/img/密码@2x.png) no-repeat 18px center;
  background-size: 10px;
}
.login .van-field__error-message{
  position: absolute;
  bottom: -24px;
}
 .login .van-form{
  padding: 30% 40px 0px;
 
}
.login .van-button{
  background-color: #4cc79b;
  border: none;
}
.login .van-field__control{
  padding: 0px 20px;
}

.vue-pass{
  margin-top: 70px;
}
.vue-bottom{
margin-top: 30px;
}

</style>
